<template>
	<div class="basicSetup">
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					隐私保护
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后观众进入直播间时头像和昵称将会脱敏展示
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[0].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					进入提示
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，观众进入直播页面将弹出弹幕提示
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[1].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					分享提示
				</div>
				<div class="basicSetupItemsTitle_cont">
					用户分享后，观众端显示分享提示
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[2].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					购买提示
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后当有人点击购买按钮时，将会发送弹幕和互动消息提示
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[3].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>

		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					礼物打赏
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，观众可以在直播页给主播打赏
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[4].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>

		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					观众主页
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，观众可以进入个人主页
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[5].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					开播提醒
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，显示“预约观看”按钮，预约后在开播前收到预约通知
				</div>
				<div class="useLable">
					<u-switch v-model="from.setting[6].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
				</div>
				<!-- 开播标题 -->
				<div class="openLive" v-if='from.setting[6].status'>
					<div class="openLiveTitle">
						<div class="openLiveTitle_left">
							开播标题
						</div>
						<div class="openLiveTitle_right ex">
							<input type="text" value="" v-model="from.setting[6].content.title" placeholder="最多只能输入20个字"
								maxlength="20" max='20' placeholder-class="zj-placeholder-class" />
						</div>
					</div>
					<div class="openLiveDesc">
						开播描述
					</div>
					<div class="openLiveCont">
						<u--textarea v-model="from.setting[6].content.desc" height='110' maxlength='100' count
							placeholder="请输入内容">
						</u--textarea>
					</div>
				</div>
			</div>
		</div>

		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					预告页
				</div>
				<div class="basicSetupItemsTitle_cont">

				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[7].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>

		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					欢迎页
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，观众进入直播间前将展示3s欢迎页
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[8].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
			<!-- 上传图片 -->
			<div class="basicSetupItemsYG" v-if='from.setting[8].status' @click="showAvatarPop()">
				<image :src="from.setting[8].content" mode=""></image>
			</div>
			<div class="basicSetupItemsYGText">
				推荐图片尺寸：750px*1206px，支持JPG、JPEG、PNG格式，3M以内
			</div>

		</div>


		<u-popup :show="isShowAvatarPop" round="10" @close="closeAvatarPop" mode="bottom">
			<view class="pop-container">
				<view class="avatar-pop-box">
					<view class="pop-item" @click="choosePic(1)">
						拍照
					</view>
					<view class="pop-item" @click="choosePic(2)">
						从手机相册选择
					</view>
				</view>
				<view class="pop-cancel-item" @click="closeAvatarPop">
					取消
				</view>
			</view>
		</u-popup>

		<div class="liveInformationBtn" @click='saveLiveEvent'>
			<div class="liveInformationBtnCont">
				保存
			</div>
		</div>
	</div>
</template>
<script>
import {
	txCosUpload
} from '@/utils/txCosUpload'
export default {
	props: {
		setInfo: [Object, String],
		liveId: [Number, String],
		liveInfo: [Object, String],
	},
	data() {
		return {
			switchValue: '',
			value5: '',
			isShowNamePop: false,
			isShowAvatarPop: false,
			from: {
				liveId: '',
				setting: [{
					content: '',
					status: false,
					type: "audiencePrivacyProtection", //隐私
				},
				{
					content: '',
					status: false,
					type: "entry", //进入提醒
				},
				{
					content: '',
					status: false,
					type: "share", //分享提示
				},

				{
					content: '',
					status: false,
					type: "buyTip", //购买提示
				},
				{
					content: '',
					status: false,
					type: "gift", //礼物打赏
				},



				{
					content: '',
					status: false,
					type: "mine", //个人主页
				},
				{
					content: {
						title: '',
						desc: ''
					},
					status: false,
					type: "notice", //开播提醒
				},


				{
					content: "",
					status: false,
					type: "previewPage" //预告
				}, {
					content: "",
					status: false,
					type: "startCover" //欢迎
				},
					// {
					// 						content: '',
					// 						status: 1,
					// 						type: "promotion", //友情提示
					// 					},

				]
			}
		}
	},
	watch: {
		setInfo(newVal, oldVal) {
			this.changeData(newVal)
		}
	},
	mounted() {
		this.from.liveId = this.liveId
		this.changeData(this.setInfo)
	},
	methods: {
		changeData(d) {
			const v = JSON.parse(JSON.stringify(d))
			if (!v.setting) return
			v.setting.forEach((ite) => {
				ite.status = ite.status == 1 ? true : false
			})
			for (var i in this.from.setting) {
				for (var k in v.setting) {
					if (this.from.setting[i].type == v.setting[k].type) {
						this.$set(this.from.setting, i, v.setting[k])
						if (this.from.setting[i].type == 'notice') {
							if (this.from.setting[i].content != '') {
								this.from.setting[i].content = JSON.parse(this.from.setting[i].content)
								this.from.setting[i].content.title = this.from.setting[i].content.title == '' ? this.liveInfo.name : this.from.liveInfo[i].content.title
								this.from.setting[i].content.desc = this.from.setting[i].content.desc == '' ? `您预约的直播${this.liveInfo.name};马上开始，点击进入观看` : this.from.liveInfo[i].content.title

							} else {
								this.from.setting[i].content = {
									title: this.liveInfo.name,
									desc: `您预约的直播${this.liveInfo.name};马上开始，点击进入观看`
								}
							}
						}
						this.$set(this.from.setting[i], 'status', v.setting[k].status)
						console.log('111', this.from)
					}

				}
			}
		},
		changeSwitch() {

		},
		showAvatarPop() {
			console.log('showAvatarPop')
			this.isShowAvatarPop = true
		},
		closeAvatarPop() {
			this.isShowAvatarPop = false
		},
		showPhonePop() {
			console.log('showPhonePop')
			this.$refs.bindPhonePopRef.formData.oldPhone = this.formData.phoneNum
			this.isShowPhonePop = true
		},
		closePhonePop() {
			this.isShowPhonePop = false
		},
		showNamePop() {
			console.log('showNamePop')
			this.isShowNamePop = true
		},
		closeNamePop() {
			console.log('closeNamePop')
			this.isShowNamePop = false
		},
		confirmNamePop(params) {
			this.formData.name = params
			this.isShowNamePop = false
		},

		confirmName() {
			console.log('confirmName')
			this.isShowNamePop = false
		},
		// 上传图片
		choosePic(type) {
			const vm = this
			if (type == 1) {
				this.$utils.androidCamera(this)
			} else {
				this.$utils.androidAlbum(this)
			}
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'wechat'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
						console.log(123, Math.round(progressData.percent * 100))
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						vm.from.setting[8].content = res.fileUrl
						vm.isShowAvatarPop = false
					})
				}
			});
		},
		// 保存直播
		async saveLiveEvent() {
			const params = JSON.parse(JSON.stringify(this.from))
			params.setting.forEach((ite) => {
				if (ite.type == 'notice' && ite.content != '') {
					ite.content = JSON.stringify(ite.content)
				}
				ite.status = ite.status ? 1 : 2
			})
			const {
				data
			} = await this.$request(this.$Api.liveUpdateSetting, params, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '保存成功',
				icon: 'none',
				duration: 1500
			})
		}
	}
}
</script>

<style lang="scss">
.basicSetup {
	width: 686rpx;
	min-height: 96rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding-bottom: 32rpx;

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #F2F2F2;

		.pop-item {
			padding: 32rpx 0;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}

	.basicSetupItems {
		padding: 0 32rpx;
		padding-top: 36rpx;
		position: relative;
		min-height: 88rpx;
		// margin-bottom: 36rpx;
		padding: 0 32rpx;
		padding-top: 32rpx;


		.basicSetupItemsTitle {
			.basicSetupItemsTitle_text {
				font-size: 28rpx;
				color: #464C5B;
			}

			.basicSetupItemsTitle_cont {
				font-size: 20rpx;
				color: #BFBFBF;
				margin-top: 12rpx;
				border-bottom: 1rpx solid #E3E8EE;
				padding-bottom: 32rpx;
			}
		}

		.useLable {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			zoom: .85;

			switch {}
		}

		.basicSetupItemsYG {
			width: 240rpx;
			height: 386rpx;
			background: #D8D8D8;
			margin-top: 16rpx;
		}

		.basicSetupItemsYGText {
			font-size: 20rpx;
			color: #8F969E;
			margin-top: 16rpx;
		}


	}

	.openLive {
		color: #464C5B;
		font-size: 28rpx;
		width: 100%;
		height: 444rpx;
		background: #F5F9FF;
		border-radius: 8rpx;

		.openLiveTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E3E8EE;
			height: 88rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.openLiveDesc {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.openLiveCont {
			padding: 0 24rpx;
			box-sizing: border-box;


		}

		.openLiveTitle_left {}

		.openLiveTitle_right {
			width: 348rpx;
			text-align: right;
		}
	}

	.liveInformationBtn {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.liveInformationBtnCont {
			width: 640rpx;
			height: 80rpx;
			background: #295FFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;

		}
	}
}
</style>